<%@page contentType="text/html" pageEncoding="windows-1251"%>
<%@taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib  uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="<c:url value="/resources/js/jquery-2.0.2.js"/>"></script>
    <!--script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script-->
    <script type="text/javascript">
        var items = [
            <c:forEach var="itemsSubResult" items="${submissionResultByItem}" varStatus="itemStatus">
            {"id":"i${itemsSubResult.key.id}","name":"${itemsSubResult.key.name}","type":"item","depends":"[<c:forEach var="categoriesResult" varStatus="catStatus" items="${itemsSubResult.value}">{'id':'c${categoriesResult.key.id}','persent':'${fn:substringBefore(categoriesResult.value/userCount*100, '.')}'}<c:if test="${!catStatus.last}">, </c:if></c:forEach>]"}<c:if test="${!itemStatus.last}">, </c:if>
            </c:forEach>
        ];
        var categories =  [
            <c:forEach var="categoriesSubResult" items="${submissionResultByCategory}" varStatus="categoriesStatus">
            {"id":"c${categoriesSubResult.key.id}","name":"${categoriesSubResult.key.name}","type":"category","depends":"[<c:forEach var="itemsResult" varStatus="itemStatus" items="${categoriesSubResult.value}">{'id':'i${itemsResult.key.id}', 'name':'i${itemsResult.key.name}','persent':'${fn:substringBefore(itemsResult.value/userCount*100, '.')}'}<c:if test="${!itemStatus.last}">, </c:if></c:forEach>]"}<c:if test="${!categoriesStatus.last}">, </c:if>
            </c:forEach>
        ];
        $(document).ready(function(){
            var table = $('div[content-table]');

            for(var i=0; i<categories.length; i++){
                table.append('<tr data-type="category" data-id="'+categories[i]['id']+'"></tr>');
                var tr_cat =$('tr[data-id='+categories[i]['id']+']');
                if(tr_cat.not('td[data-stub]')){
                    tr_cat.append('<td data-stub>&nbsp;</td>');
                }
                tr_cat.append('<td data-id="'+categories[i]['id']+'">'+categories[i]['name']+'</td>');
                var items = categories[i].depends;
                for(var n=0; n<items.length; n++){
                    table.append('<tr data-type="item" data-id="'+items[i]['id']+'"></tr>');
                    lines += "<td>\n";
                    lines += "<td>\n";
                    lines += "</td>\n";
                }
                lines += "</tr>\n";
            }
        });

    </script>
    <style type="text/css">
        #mainContent{
            margin: 200px 0px 0px 100px;
            border: 0px solid #525252;
            width: 50%;
            height: 100%;
            padding: 10px;
            position: relative;
        }
        #mainContent div[title-category]{
            width:100%;
            text-align:center;
            border: 1px solid #000;
        }

        #mainContent div[title-item]{
            float:left;
            border: 1px solid #000;
            height: 300px;
            line-height: 300px;
        }

    </style>
</head>
<body>
<div id="mainContent">
    <div title-category>Category</div>
    <div title-item><span>Item</span></div>
    <table border="1" content-table>

    </table>
</div>
</body>
</html>